<template>
    <div class="header">
        <el-menu :router="true" 
            class="el-menu-demo"
            default-active="/"
            mode="horizontal"
            background-color="#1f5c9d"
            text-color="#fff"
            active-text-color="#ffd04b">
            <img src="@/assets/logo.png" class="logo" />
            <span class="logo-txt">视途北斗视频运营平台</span>

            <!-- 导航条 -->
            <el-menu-item index="/">
                <i class="el-icon-monitor"></i><br />
                <span slot="title">智慧看板</span>
            </el-menu-item>
            <el-menu-item index="/monitor/">
                <i class="el-icon-view"></i><br />
                <span slot="title">实时监控</span>
            </el-menu-item>
            <el-menu-item index="/history/">
                <i class="el-icon-time"></i><br />
                <span slot="title">历史回放</span>
            </el-menu-item>
            <el-menu-item index="/report/">
                <i class="el-icon-pie-chart"></i><br />
                <span slot="title">统计报表</span>
            </el-menu-item>
            <el-menu-item index="/user/">
                <i class="el-icon-office-building"></i><br />
                <span slot="title">运营管理</span>
            </el-menu-item>
            <el-menu-item index="/system/">
                <i class="el-icon-setting"></i><br />
                <span slot="title">系统管理</span>
            </el-menu-item>
            
            <!-- 用户下拉列表 -->
            <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">
                    {{ user }}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item icon="el-icon-edit" command="a">修改密码</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-s-fold" command="b">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-menu>

        <!-- 修改密码对话框 -->
        <el-dialog title="商品编辑" :visible.sync="dialogFormVisible" width="400px">
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" style="width: 300px" class="demo-ruleForm">
                <el-form-item label="密码" prop="oldPass">
                <el-input type="password" v-model="ruleForm.oldPass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="pass">
                <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass">
                <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="$refs['ruleForm'].resetFields()">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import {logout} from "@/api/login"
import passwordApi from "@/api/password"

export default {

    data(){
        // 自定义密码校验
        const validateOldPass = (rule, value, callback) => {
        passwordApi.checkPwd(this.user.id, value).then(response => {
            const resp = response.data
            if(resp.flag){
            callback()
            }else{
            callback(new Error(resp.message))
            }
        })
        }

        // 自定义确认密码校验
        const validatePass = (rule, value, callback) => {
        if(value == this.ruleForm.pass){
            callback()
        }else{
            callback(new Error("新密码与确认密码不一致"))
        }
        }

        return{
            user: JSON.parse(localStorage.getItem('seeto-user')).user,
            ruleForm: {
                oldPass: '',
                pass: '',
                checkPass: ''
            },
            dialogFormVisible: false,
            rules: {
                oldPass: [
                    {required: true, message: '原密码不能为空', trigger: 'blur'},
                    {validator: validateOldPass, trigger: 'blur'}
                ],
                pass: [
                    {required: true, message: '新密码不能为空', trigger: 'blur'}
                ],
                checkPass: [
                    {required: true, message: '确认密码不能为空', trigger: 'blur'},
                    {validator: validatePass, trigger: 'change'}
                ]
            }
        }
    },
    methods: {
      handleCommand(command) {
        switch (command) {
            case 'a':
                this.handlePwd()
                break;
            case 'b':
            // 退出系统
                this.handleLogout()
                break;
            default:
                break;
        }
      },

      // 修改密码
        handlePwd(){
            this.dialogFormVisible = true
            this.$nextTick(() => {
                    this.$refs['ruleForm'].resetFields()
            })
        },
        // 提交修改密码
        submitForm(formName){
            this.$refs[formName].validate(valid => {
                if(valid){
                console.log('密码修改成功')
                passwordApi.updatePwd(this.user.id, this.ruleForm.checkPass).then(response => {
                    const resp = response.data
                    this.$message({
                        message: resp.message,
                        type: resp.flag ? 'success' : 'error'
                    })
                    if(resp.flag){
                        this.handleLogout()
                        this.dialogFormVisible = false
                    }
                })
                }else{
                    return false
                }
            })
        },

        // 退出系统
        handleLogout(){
            logout(localStorage.getItem('seeto-token')).then(response => {
                    const resp = response.data
                    if(resp.flag){
                        // 清除本地缓存token和user
                        localStorage.removeItem('seeto-token')
                        localStorage.removeItem('seeto-user')
                        // 跳转至登录页面
                        this.$router.push('/login')
                    }else{
                        this.$message({
                            message: resp.message,
                            type: "warning",
                            // 持续时间5秒
                            duration: 5000
                        })
                    }
                })
        }
    },
}
</script>

<style scoped>
.header{
    position: relative;
}
.el-menu{
    background-color: #1f5c9d;
    padding-left: 400px;
}
.el-menu-item{
    height: 70px;
    line-height: 20px;
    text-align: center;
    padding: 15px 25px 0;
}
.el-menu-item i{
    margin-bottom: 5px;
}
.logo{
    position: absolute;
    top: 20px;
    left: 40px;
}
.logo-txt{
    position: absolute;
    left: 100px;
    font-size: 20px;
    color: white;
}
.el-dropdown{
    float: right;
    margin-right: 80px;
}
.el-dropdown-link{
    color: white;
    cursor: pointer;
}
</style>